<template>
    <c-layout>
      <template #header>
        <c-card title="查询条件">
          <c-forms :model="formData" :rules="rules" ref="form" showBtn :ok="submit">
            <c-formitems :form-data="formData" v-for="item in formItems" :key="item.value" :config="item"></c-formitems>
          </c-forms>
        </c-card>
      </template>
      <template #main>
        <c-card title="列表名字">
          <template #right>
            <el-button @click="createRow" type="success">新增</el-button>
            <el-button type="primary">批量操作</el-button>
          </template>
          <c-table :data="tableData" @changePage="click" @selection-change="tabSelectionChange" selection>
            {{ each formlist  }}
            {{if $index !== formlist.length-1}}
            <el-table-column prop="{{$value.value}}" label="{{$value.label}}" width="150" align="center"></el-table-column>
             {{else}}
            <el-table-column prop="{{$value.value}}" label="{{$value.label}}" align="center"></el-table-column>
            {{/if}}
            {{ /each }}
            <el-table-column fixed="right" label="操作" width="150" align="center">
              <template #default="scope">
                <el-button @click.prevent="detaileRow(scope.row)" type="text">详情</el-button>
                <el-button @click.prevent="deleteRow(scope.$index, tableData)" type="text">移除</el-button>
              </template>
            </el-table-column>
          </c-table>
        </c-card>
      </template>
    </c-layout>
    <c-dialog title="模态框名字" v-model="dialogVisible" width="90%">
      <c-forms :model="dialogFormData" :rules="dialogRules" ref="dialogForm">
        <c-formitems :form-data="dialogFormData" v-for="item in dialogFormItems" :key="item.value" :config="item"></c-formitems>
      </c-forms>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogCancel">取 消</el-button>
          <el-button type="primary" @click="dialogOk">确 定</el-button>
        </span>
      </template>
    </c-dialog>
  </template>
  <script>
  // import { reactive, ref } from 'vue'
  // import { search } from './part/staticData.js'
  import { tableData, tabSelectionChange, click, deleteRow, createRow, detaileRow } from './part/table.js'
  import { form, submit, formData, formItems, rules } from './part/search.js'
  import { dialogVisible, dialogForm, dialogFormData, dialogFormItems, dialogRules, dialogOk, dialogCancel } from './part/dialog.js'
  
  export default {
    setup() {
      return {
        dialogVisible,
        dialogForm,
        dialogFormData,
        dialogFormItems,
        dialogRules,
        dialogOk,
        dialogCancel,
  
        form,
        submit,
        formData,
        formItems,
        rules,
  
        // search,
  
        click,
        tableData,
        tabSelectionChange,
        deleteRow,
        createRow,
        detaileRow,
      }
    },
  }
  </script>
  <style lang="scss"></style>
  